<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-10 16:39:29
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-10 16:54:25
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <input type="text">
        <input type="password">
        <input type="reset">
        <input type="submit" value="提交">

    </form>
    <script>
        // 表单
        // 捕捉用户在表单上的行为 触发的事件就叫 表单时间 
        var inputEle = document.querySelector('input');
        var formEle = document.querySelector('form');
        // focus 焦点移入
        // inputEle.onfocus = function(){
        //     console.log('焦点移入');
        // }

        // // blur 失去焦点  
        // inputEle.onblur = function(){
        //     console.log('失去焦点');
        // }
        // change 表单内容发生变化  
        // inputEle.onchange = function(){
        //     console.log('内容变化了');
        // }
        // 焦点移入和焦点移出内容不一致会触发 
        // 失去焦点 会触发事件

        // input 表单输入 
        // 注意 输入或者删除 都会触发 
        // 只要移入焦点时的内容发生了变化 
        // 不管添加还是删除 都会实时触发 
        // inputEle.oninput = function(){
        //     console.log('内容变化了');
        // }

        // submit 
        // formEle.onsubmit = function(){
        //     console.log('提交了');
        // }    

        // 只有form 才有summit 
        // 必须绑定在form级别才生效
        // reset 

        formEle.onreset = function(){
            console.log('重置了');
        }   
        // 必须绑定在form级别才生效


    
    </script>
</body>
</html>